<template>
  <div>
    <van-nav-bar
      title="乐购"
      left-text="返回"
      left-arrow
       @click-left="onClickLeft"
    />
    <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" @input="search" />
  <!-- 搜索页初始页面 -->
  <div>
    <div class="hotKeywordList" v-if= "current== 'hotKeywordList'">
      <div class="top">
        <span>历史记录</span>
        <van-icon name="delete-o" size="25px" @click="remove"/>
      </div>
      <!-- <ul class="keywords" >
        <li v-for="item in list.hotKeywordList" :key="item.id"
         @click="keyadd(item.keyword)"
        >
          <p>{{ item.name }}</p>
        </li>
      </ul> -->
      <ul class="keywords">
        <li v-for="item in list.historyData" :key="item.id"
           @click="keyadd(item.keyword)" >
          <p>{{ item.keyword }}</p>
        </li>
      </ul>
      <div class="hot">
      <span>热门搜索</span>
      <ul class="keywords">
        <li v-for="item in list.hotKeywordList" :key="item.id" 
          @click="keyadd(item.keyword)">
          <p>{{ item.keyword }}</p>
        </li>
      </ul> 
    </div>
    </div>
    
      <!-- 搜索提示 -->
      <div class="notice" v-if ="current=='notice'">
        <div v-for="item in keywords" :key="item.id"
        @click="showGoods(item.name)">
 <van-cell :border="false" :title="item.name" />  
        </div>
         
        </div> 

    <!-- 产品列表 -->
    <div class="goodsList" v-if ="current=='goodsList'"  >
 <div v-for="item in goodsList" :key="item.id" class="vansbox">
            <img :src="item.list_pic_url" alt="" />
            <p>{{ item.name }}</p>
            <p>{{ item.retail_price }}元</p>
          </div>
    </div>
    <!-- 详情页 -->
    <div class="photoList">
    </div>
    </div>
  </div>
</template>

<script>
import { indexaction, helperaction,addhistoryaction } from "@/api/home/detail/index.js";
export default {
  data() {
    return {
      value: "",
      current: "hotKeywordList",
      list: {},
      keywords:[],
      // noticelist:[],
      goodsList:[]
    };
  },
  async created() {
    var res = await indexaction({
      openId: localStorage.getItem("openId"),
    });
    // console.log(res);
    this.list = res;
  },
  methods: {
     onClickLeft() {
    // this.$router.push('/home')
    this.$router.go(-1)
    },
    remove(){
           this.list.historyData = ''
    },
    search() {
      if (this.value != "") {
        this.current='notice'
        helperaction({
          keyword:this.value,
          order: "",
        }).then((res) => {
          console.log(res);
          this.keywords=res.keywords;
        });
      }else{
        this.current='hotKeywordList'
      }
    },
    keyadd(val) {
      this.current = 'goodsList'
      helperaction({
        keyword: val,
        order: ''
      }).then((res) => {
        console.log(res)
        this.goodsList = res.keywords
      })
    },
        showGoods(val) {
      this.current = 'goodsList'
      addhistoryaction({
        keyword: val,
        openId: localStorage.getItem('openId')
      })
      helperaction({
        keyword: val,
        order: ''
      }).then((res) => {
        console.log(res)
        this.goodsList = res.keywords;
      })
    }
    
  },
};
</script>
  
<style lang="scss" scoped>
.hotKeywordList {
  height: 50%;
  background-color: #fff;
  .top {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: wrap;
  }
  span {
    font-size: 14px;
  }
}
.keywords {
  margin-top: 0.3125rem;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
  p {
    border: 1px solid #ccc;
    line-height: 18px;
    padding: 5px;
    text-align: center;
    margin: 0 0.4rem 0.3125rem 0;
    font-style: 12px;
  }
}
.keywords li:first-child{
    color: red;
    border: red ;
  }
.hot {
  // position: relative;
  font-size: 0.625rem;
  background-color: #fff;
  margin-bottom: 50px;
  // width: 50%;
}
.goodslist {
  text-align: center;
  width: 6.25rem;
  img{
    width: 100%;
  }
  p {
    font-size: 0.54667rem;
    padding: 0.26667rem;
  }
  
}
</style>